@()(implicit request: RequestHeader)
@main("Varieties") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("phylotree.js-master/phylotree.css")">
	<script src="@routes.Assets.at("javascripts/d3.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/underscore.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("phylotree.js-master/phylotree.js")" type="text/javascript"></script>

	<style>

			.fixed-table-container tbody td .th-inner, .fixed-table-container thead th .th-inner {
				white-space: normal;
				display: block;
			}

			.bootstrap-table .table > thead > tr > th {
				vertical-align: middle;
				text-align: center;
			}

			.bootstrap-table .table tbody > tr > td {
				vertical-align: middle;
				text-align: center;
			}

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}

			table img {
				vertical-align: middle;
			}

			table .myImgTd {
				text-align: center;
			}

			.fa-rotate-135 {
				-webkit-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				transform: rotate(135deg);
			}

			.fa-rotate-45 {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.myGroup {
				margin-top: 15px;
				margin-left: 15px;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Varieties</h2>
		</div>
	</div>

	<div class="table-responsive" style="display: block">
		<label>Select the columns to display:</label>
		<div id="checkbox" class="checkbox">

		</div>

		<div style="display: none;
			margin-bottom: 10px">Filtering conditions:
			<span id="filterCondition"></span>
		</div>

		<div style="display: none;
			margin-bottom: 10px">Sorting conditions:
			<span id="sortCondition"></span>
		</div>

		<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
		data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
		style="table-layout: fixed"
		>
			<thead>

			</thead>
		</table>

		<div style="margin-top: 10px">
			FAP, fruit apical point (Absent <0.4; Medium 0.4-2.5; Long >2.5mm); FAPS, fruit apical point to stalk (offset / in line); FC, flush color; FN, fruit neck (Absent <0.4; Present 0.4-2.5; Pronounced >2.5mm); IC, inflorescence color; IL, inflorescence length (Medium 150-225; long >225mm); LLWR, leaf length/width ratio (Low <3:1 Medium 3-5:1 High >5:1); LMS, leaf margin spines (Smooth <0.5; Moderately spiny 0.5-6.9; spiny 7-25 very spiny >25mm); LPN, leaves per node; LT, leaf tips (A: acute; R: round; *: some terminal spines); NC, number of crests (Slightly wavy <2; Wavy 2-5; Very wavy >5); OC, other characteristics;<br>
			Orig, origin; PL, petiole length (Short <2; Medium 2-7; Long >7mm); Ref, references; SL, stalk length (Short <4; Medium 4-5; Long >5mm); Spe, species; SW, stalk width (Thin <4; Medium 4-5; Thick >5mm); TC, tree canopy.
		</div>

		<div id="allFilterContent"></div>
	</div>

	<script>

			$(function () {

				Variety2013.init

			})

	</script>

}
